<template>
  <div class="app-container">
    <div class="view-title">权益套餐</div>
    <div class="search_box">
      <el-form
        ref="formSearrch"
        :model="searchForm"
        label-width="80px"
        style="display: flex"
      >
        <el-form-item label="产品名称">
          <el-input
            v-model="searchForm.name"
            placeholder="请输入产品名称"
          ></el-input>
        </el-form-item>

        <el-form-item label="套餐编码">
          <el-input
            v-model="searchForm.package_code"
            placeholder="请输入套餐编码"
          ></el-input>
        </el-form-item>

        <el-form-item label="套餐类型">
          <el-cascader
            v-model="searchForm.type"
            :options="tableDataRecharge"
            :props="{
              label: 'name',
              value: 'id',
              checkStrictly: true,
              children: 'children',
              expandTrigger: 'click',
            }"
            @change="handleChangeSearchType"
          ></el-cascader>
        </el-form-item>

        <el-form-item label="上架状态">
          <el-select v-model="searchForm.status" placeholder="请选择上架状态">
            <el-option
              v-for="item in uploadOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <div class="add_box">
      <el-button type="danger" @click="handleSearch">搜索</el-button>
      <el-button type="primary" @click="handleKeepPackage">同步套餐</el-button>
      <el-button type="warning" @click="handleRefreshPackage">重置</el-button>
    </div>
    <div>
      <el-table :data="tableDataEquirty" style="width: 100%">
        <el-table-column prop="id" label="id" width="70"> </el-table-column>
        <el-table-column prop="name" label="产品名称" width="180">
        </el-table-column>
        <el-table-column prop="category_name" label="产品分类">
        </el-table-column>
        <el-table-column prop="package_code" label="产品编码">
        </el-table-column>
        <el-table-column prop="cover_img" label="产品封面图">
          <template slot-scope="scope">
            <img
              :src="scope.row.cover_img"
              alt=""
              style="width: 80px; height: 80px"
              v-if="scope.row.cover_img"
            />
          </template>
        </el-table-column>
        <el-table-column prop="package_type" label="套餐类型" width="280">
          <template slot-scope="scope">
            <el-tag type="primary" v-if="scope.row.package_type">
              {{
                scope.row.package_type
                  ? scope.row.package_type.all_node_name
                  : ""
              }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column prop="sale_price" label="同步价格"> </el-table-column>
        <el-table-column prop="lineation_price" label="原价"> </el-table-column>
        <el-table-column prop="price" label="优惠价格"> </el-table-column>
        <el-table-column prop="status" label="上下架状态">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              active-color="#13ce66"
              inactive-color="#ccc"
              :active-value="1"
              :inactive-value="0"
              @change="upEnabled($event, scope.row)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="weight" label="权重"> </el-table-column>
        <el-table-column prop="created_at" label="创建时间"> </el-table-column>
        <el-table-column prop="updated_at" label="更新时间"> </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="handleEdit(scope.row)" type="text" size="small"
              >编辑</el-button
            >
            <el-button @click="handleDelete(scope.row)" type="text" size="small"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page_box">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryParams.pageNow"
        :page-sizes="[10, 20, 30, 40, 100]"
        :page-size="queryParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <!-- 编辑弹窗 -->
    <edit-equirty-package
      ref="refEdit"
      :packageDetails="packageDetails"
      :equirtyType="equirtyType"
      :tableDataRecharge="tableDataRecharge"
      @sureDialogEdit="sureDialogEdit"
      @cancelDialogEdit="cancelDialogEdit"
    />
  </div>
</template>
<script>
import {
  getAppQyPackageList,
  getAppQyPackageInfo,
  updateAppQyPackage,
  syncQyPackage,
  deleteAppQyPackage,
} from "@/api/equityManage";
import { getAppQyPackageTypeList, selectCascader } from "@/api/equirtyType";
import EditEquirtyPackage from "./components/editEquirtyPackage.vue";
export default {
  components: {
    EditEquirtyPackage,
  },
  data() {
    return {
      tableDataEquirty: [],
      searchObj: {},
      queryParams: {
        pageNow: 1,
        pageSize: 10,
      },
      total: null,
      packageDetails: {},
      equirtyType: [],
      searchForm: {},
      uploadOptions: [
        {
          value: 0,
          label: "下架",
        },
        {
          value: 1,
          label: "上架",
        },
      ],
      tableDataRecharge: [],
    };
  },
  mounted() {
    this.getAppQyPackageList();
    this.getAppQyPackageTypeList();
  },
  methods: {
    // 搜索套餐类型
    handleChangeSearchType(e) {
      this.searchForm.type = e[e.length - 1];
    },

    // 获取权益套餐列表接口
    getAppQyPackageList() {
      getAppQyPackageList({
        name: this.searchForm.name,
        type: this.searchForm.type,
        status: this.searchForm.status,
        package_code: this.searchForm.package_code,
        page_now: this.queryParams.pageNow,
        page_size: this.queryParams.pageSize,
      }).then((res) => {
        if (res.code == 1) {
          this.tableDataEquirty = res.data;
          this.total = res.page_info.total_count;
          this.selectCascader();
        } else {
          this.$message.error(res.msg);
          return;
        }
      });
    },

    // 查询单条接口
    getAppQyPackageInfo(val) {
      getAppQyPackageInfo({
        id: val.id,
      }).then((res) => {
        if (res.code == 1) {
          this.packageDetails = res.data;
        } else {
          this.$message.error(res.msg);
          return;
        }
      });
    },

    // 编辑接口
    updateAppQyPackage(val) {
      updateAppQyPackage({
        id: val.id,
        weight: val.weight,
        cover_img: val.cover_img,
        detail_img: val.detail_img,
        type: val.type,
        lineation_price: val.lineation_price,
        price: val.price,
      }).then((res) => {
        if (res.code == 1) {
          this.$message.success("编辑成功");
          this.getAppQyPackageList();
          this.$refs.refEdit.dialogVisibleEdit = false;
          this.$refs.refEdit.editForm.cover_img = "";
          this.$refs.refEdit.editForm = {};
        } else {
          this.$message.error(res.msg);
          return;
        }
      });
    },

    // 同步套餐接口
    syncQyPackage() {
      syncQyPackage().then((res) => {
        if (res.code == 1) {
          this.$message.success("同步成功");
          this.getAppQyPackageList();
        } else {
          this.$message.error(res.msg);
          return;
        }
      });
    },

    // 上下架接口
    uploadAppQyPackage(e, val) {
      updateAppQyPackage({
        id: val.id,
        status: e,
      }).then((res) => {
        if (res.code == 1) {
          this.$message.success("编辑成功");
          this.getAppQyPackageList();
          this.$refs.refEdit.dialogVisibleEdit = false;
        } else {
          this.$message.error(res.msg);
          return;
        }
      });
    },

    // 获取权益套餐分类列表接口
    getAppQyPackageTypeList() {
      getAppQyPackageTypeList({
        page_now: 1,
        page_size: 20,
      }).then((res) => {
        if (res.code == 1) {
          this.equirtyType = res.data;
        } else {
          this.$message.error(res.msg);
          return;
        }
      });
    },

    // 搜索
    handleSearch() {
      this.queryParams.pageNow = 1;
      this.getAppQyPackageList();
    },

    // 同步套餐
    handleKeepPackage() {
      this.syncQyPackage();
    },

    // 重置
    handleRefreshPackage() {
      this.searchForm = {};
      this.queryParams.pageNow = 1;
      this.getAppQyPackageList();
    },

    // 切换上下架
    upEnabled(e, val) {
      this.uploadAppQyPackage(e, val);
    },

    // 编辑
    handleEdit(val) {
      this.getAppQyPackageInfo(val);
      this.$refs.refEdit.dialogVisibleEdit = true;
    },

    // 编辑确定
    sureDialogEdit(val) {
      this.updateAppQyPackage(val);
    },

    // 编辑取消
    cancelDialogEdit() {
      this.$refs.refEdit.dialogVisibleEdit = false;
    },

    // 删除接口
    deleteAppQyPackage(val) {
      deleteAppQyPackage({
        ids: val.id,
      }).then((res) => {
        if (res.code == 1) {
          this.$message.success("删除成功");
          this.getAppQyPackageList();
        } else {
          this.$message.error(res.msg);
          return;
        }
      });
    },

    // 删除
    handleDelete(val) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.deleteAppQyPackage(val);
        })
        .catch(() => {});
    },

    // 分页
    handleSizeChange(val) {
      this.queryParams.pageNow = 1;
      this.queryParams.pageSize = val;
      this.getAppQyPackageList();
    },
    handleCurrentChange(val) {
      this.queryParams.pageNow = val;
      this.queryParams.pageSize = 10;
      this.getAppQyPackageList();
    },

    // 获取权益套餐分类接口
    selectCascader() {
      selectCascader().then((res) => {
        if (res.code == 1) {
          this.tableDataRecharge = this.getTreeData(res.data);
        } else {
          this.$message.error(res.msg);
          return;
        }
      });
    },

    // 处理空白children
    getTreeData(data) {
      // 循环遍历json数据
      for (var i = 0; i < data.length; i++) {
        if (data[i].children.length < 1) {
          // children若为空数组，则将children设为undefined
          data[i].children = undefined;
        } else {
          // children若不为空数组，则继续 递归调用 本方法
          this.getTreeData(data[i].children);
        }
      }
      return data;
    },
  },
};
</script>
<style lang="scss" scoped>
.add_box {
  padding-bottom: 10px;
}

.search_box {
}
</style>
